如何自定义WordPress的默认视频输出

当我们将视频地址直接贴入WordPress文章中的时候，WordPress默认会添加video标签，但会设定固定的宽高，无法自适应，同时也没有兼容各端的考虑。实际使用的时候我们需要重新定制。

废话不多说，以下是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
add_filter('wp_video_shortcode',function($output, $atts){
    if(is_array($atts) && isset($atts['src']) && !empty($atts['src'])) {
        $url=$atts['src'];
        $output='<div class="entry-video">';
        $output.='<video 
                style="object-fit:fill"
                webkit-playsinline
                playsinline 
                x5-video-player-type="h5" 
                x5-video-player-fullscreen="true"
                x5-video-orientation="portraint"
                preload="auto"
                muted 
                crossorigin="anonymous"
                src="'.$url.'"></video>';
        $output.='</div>';
    }
    return $output;
},10,2);

通过wp_video_shortcode的filter勾子，重新输出想要的html代码来替代WordPress原本的output，然后根据需要在css中对entry-video定义自适应的代码即可。例如：

1
2
3
.entry-video video {
    max-width: 100%;
}

wordpress video